<template>
  <div>
		<v-header :headerLeftText="leftText" :headerCenterText="headerText"></v-header>
		
		<div class="container bgd_color_gray">
			<div class="border_bot1 pad_lr20 overflow_hide bgd_color_white f_size22 line_height120">
				<div class="left width116">
					会员头像：
				</div>
				<div class="left position_rel">
					<img id="showPic" class="img_width100" :src="src+photo"/>
          <input @change="readAsDataURL" type="file" id="file" class="img_width100 head_pic_input" name="" value="" />
          <img class="img_width100 head_pic_btn" src="../static/images/make_pic_icon.png" />
				</div>
			</div>
			<div class="line_height70 pad_lr20 border_bot1 overflow_hide f_size22 bgd_color_white">
				<div class="left width116">
					会员账号：
				</div>
				<div class="left f_color_gray0">
					<input v-model="username" class="line_height64 border_none" type="" name="" id="" value="" />
				</div>
			</div>
			<div class="line_height70 pad_lr20 border_bot1 overflow_hide f_size22 bgd_color_white">
				<div class="left width116">
					姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
				</div>
				<div class="left f_color_gray0">
					<input v-model="realname" class="line_height64 border_none" type="" name="" id="" value="" />
				</div>
			</div>
			<div class="line_height70 pad_lr20 border_bot1 overflow_hide f_size22 bgd_color_white">
				<div class="left width116">
					手&nbsp;&nbsp;机&nbsp;&nbsp;号：
				</div>
				<div class="left f_color_gray0">
					<input disabled="disabled" v-model="userInfo.phone" class="line_height64 border_none" type="" name="" id="" value="" />
				</div>
			</div>
			<div class="line_height70 pad_lr20 border_bot1 overflow_hide f_size22 bgd_color_white">
				<div class="left width116">
					推&nbsp;&nbsp;荐&nbsp;&nbsp;人：
				</div>
				<div class="left f_color_gray0">
					<input disabled="disabled" v-model="userInfo.referPhone" class="line_height64 border_none" type="" name="" id="" value="" />
				</div>
			</div>
			<div class="margin_t50 margin_lr20 box_size_border">
				<button @click="modifyPersonalInfo" class="f_size32 f_color_white bgd_color_main width_100 line_height80 border_none border_radius20">确认</button>
			</div>
		</div>

  </div>
</template>
<script>
	import { Toast } from 'mint-ui';
	
export default {
  created () {
    this.$api.get('/front/users', null, r => {
      console.log('个人信息', r)
      this.userInfo = r.data.list[0]
      this.username = r.data.list[0].username
      this.realname = r.data.list[0].realname
      this.photo = r.data.list[0].photo
    })
  },
  data () {
    return {
    	leftText: '',
			headerText: '个人信息',
      userInfo: {},
      username: '',
      realname: '',
      src: this.$src,
      photo: '',
      pic_data: '',
      head_path: ''
    }
  },
  methods: {
    readAsDataURL: function () {
    var self = this
    //检验是否为图像文件
      var file = document.getElementById("file").files[0];
      if(!/image\/\w+/.test(file.type)) {
          Toast("这不是图片文件！请检查！")
          return false;
      }
      var reader = new FileReader();
      //将文件以Data URL形式读入页面
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        console.log('this.result', typeof(this.result))
          var result = this.result.split(',')[1]
          var showPic = document.getElementById("showPic");
          //显示文件
          self.$api.post('/admin/upload/base64', {base64: result, ext: 'jpg'}, r => {
            console.log('图片上传r', r)
            self.photo = r
          })
          showPic.setAttribute("data-pic", result)
          showPic.setAttribute("src", this.result)

      }
    },
    modifyPersonalInfo: function () {
    var showPic = document.getElementById("showPic");
    //显示文件
    var pic_d = showPic.getAttribute("data-pic")
      this.$api.put('/front/users/modifyInfo', {
        photo: this.photo,
        username: this.username,
        realname: this.realname
      }, r => {
        console.log('修改信息r', r)
        if(r === '修改成功') {
          Toast(r.data)
        }
      })
    }
  }
}
</script>

<style>
</style>
